<template>
    <div class="post">
        <div class="postItem" v-for="(postItem,index) in postData">
            <router-link :to="'/post/postDetail?key='+index">
                <div class="user">
                    <div>
                        <img v-if="postItem.userimg == ''"
                             src="http://rainbow.paint-future.com/static/m/imgs/s-head.png"
                             alt="">
                        <img v-if="postItem.userimg!=''" :src="postItem.userimg | RIH" alt="">
                    </div>
                    <div class="userName">
                        <span>{{postItem.username}}</span>
                        <span>{{postItem.addtime}}</span>
                    </div>
                </div>
                <div class="postContent">
                    <p>{{postItem.title}}</p>
                    <div class="postImg">
                        <img v-for="(postImg,index) in postItem.img" :src="postImg.orikey | RIH" alt="">
                    </div>
                    <div class="content">{{postItem.content}}</div>
                    <div class="postComment">
                        来自<span class="cateName">{{postItem.categoryname}}</span>
                        <span class="postReply">
                            <i class="fa fa-thumbs-o-up"></i>
                            <span>{{postItem.thumbsup}}</span>
                            <i class="fa fa-commenting-o"></i>
                            <span>{{postItem.replycount}}</span>
                        </span>
                    </div>
                </div>
            </router-link>
        </div>
        <h3>没有更多内容了！</h3>
    </div>
</template>

<script>
    export default {
        name: "tiezi",
        data: function () {
            return {
                postData: []
            }
        },
        mounted() {
            var that = this
            this.$http.get('/rainApi/subject/getRecommendSubjectAjax').then(function (data) {
                that.postData = data.data.data
            })
        }
    }
</script>

<style scoped>
    .post {
        background: #f0f0f0;
    }

    .postItem {
        padding: 4vw;
        background: white;
        margin-top: 2vw;
    }

    .user img {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
    }

    .user {
        display: flex;
    }

    .user .userName {
        margin-left: 4vw;
        display: flex;
        flex-direction: column;
        font-size: 3vw;
    }

    .userName > span:nth-child(2) {
        color: #b4b9c4;
        padding-top: 2vw;
    }

    .postImg {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .postImg img {
        width: 29vw;
        height: 29vw;
        border-radius: 5px;
        margin-left: 2vw;
    }

    .content {
        font-size: 3vw;
        color: #b4b9c4;
        margin-top: 5vw;
    }

    .postComment {
        margin-top: 4vw;
        color: #b4b9c4;
    }

    .cateName {
        color: #5cb6f0;
    }

    .postReply {
        float: right;
    }

    h3 {
        margin: 0;
        text-align: center;
        font-weight: normal;
        line-height: 12vw;
        font-size: 4vw;
    }

    a {
        color: #333;
    }
</style>
